<template>
    <Header></Header>

    <div class="box">
        <img src="https://lmcacc.oss-cn-beijing.aliyuncs.com/bgc.jpg" alt="">


        {{formModel}}
        <div class="login-form">
            <div class="title">登录</div>

            <el-form ref="form" :model="formModel" size="large"
                     :rules="rules"

            >

                <el-form-item prop="phone">
                    <el-input v-model="formModel.phone"
                              :prefix-icon="Phone"
                    ></el-input>
                </el-form-item>

                <el-form-item prop="code">
                    <div class="code">
                        <el-input v-model="formModel.code"
                                  :prefix-icon="Message"
                                  class="code_left"
                        ></el-input>

                        <div class="code_right" @click="getCode()">
                            获取短信验证码
                        </div>
                    </div>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" @click="changeLogin" class="changeLogin">登录</el-button>
                </el-form-item>


            </el-form>
        </div>
    </div>


</template>

<script setup>
    import {ref, reactive, onMounted} from "vue"
    import axios from 'axios'
    import {useRouter} from 'vue-router'

    import {User, Lock, Phone, Message} from '@element-plus/icons-vue'
    import {useUserStore} from '@/stores/user.js'

    const router = useRouter()
    const formModel = ref({
        phone: '',
        code: '',
        username: '',
        password: ''
    })

    const form = ref({})

    const rules = {
        phone: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
            {
                pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
                message: '手机号输入格式不正确',
                trigger: 'blur'
            },


        ],

        code: [
            {required: true, message: '请输入验证码', trigger: 'blur'},
            {pattern: /^[0-9]{6}$/, message: '验证码为六位数字', trigger: 'blur'}
        ],

        username: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
            {min: 2, max: 10, message: '长度在 2 到 5 10字符', trigger: 'blur'}
        ],

        password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 2, max: 10, message: '长度在 2 到 5 10字符', trigger: 'blur'}
        ],

    }


    const msg = ref('')

    const getCodeApi = async () => {

        await axios.get('/msg/send/' + formModel.value.phone).then(resp => {
            msg.value = resp.data
            console.log(msg.value)
            ElMessage.success(msg.value)
        })
    }

    const getCode = () => {
        getCodeApi()

    }

    const logResult = ref('')


    const userStore = useUserStore()


    const changeLogin = async () => {
        await form.value.validate()

        const res = await axios.post('/user/login', formModel.value)

        if (res.data.code === 1) {
            await ElMessage.success('登录成功')
            await userStore.setToken(res.data.data)
            await userStore.getUser()
            if (userStore.user.role === 1) {
                router.push('/user')
            } else {
                router.push('/doctor')
            }

        } else {
            ElMessage.error(res.data.msg)
        }

    }

</script>

<style scoped lang="scss">
    .box {

        position: relative;


        img {
            width: 100%;
        }
    }

    .other {
        background-color: #F7F7F8;
        height: 106px;
        margin-bottom: 15px;

        ul {
            display: flex;
            justify-content: center;

            li {
                width: 300px;
                height: 106px;
                border-left: 1px solid #e9ebee;
                padding-top: 23px;

                .iconfont {
                    display: block;
                    width: 300px;
                    text-align: center;
                    color: #F2C932;
                    font-size: 45px;
                }

                p {
                    text-align: center;
                    color: #71767a;

                }
            }
        }
    }

    .login-form {
        padding: 20px;

        margin: 0 auto;
        position: relative;
        bottom: 950px;


        background-color: #fff;
        width: 348px;
        height: 379px;

        .title {
            text-align: center;
            margin-bottom: 10px;
            font-size: 16px;


        }


    }

    .form {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }


    .code {
        display: flex;

        .code_left {
            width: 180px;

        }

        .code_right {
            cursor: pointer;
            width: 120px;
            margin-left: 10px;
            border-radius: 5px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            border: 1px solid #375EDC;
            color: #375EDC;

        }
    }

    .changeLogin {
        border: 1px solid #375EDC;
        color: #fff;
        background-color: #375EDC;
        width: 250px;
        text-align: center;
        margin-top: 50px;
        margin-left: 30px;
    }

</style>
